/* flex.css文件：封装公用flex布局 */

/* 主轴为row -- start */
.flex_row_start_start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex_row_start_center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex_row_start_end {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}

.flex_row_center_start {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.flex_row_center_center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex_row_center_end {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.flex_row_end_start {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
}

.flex_row_end_center {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.flex_row_end_end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}

.flex_row_between_start {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.flex_row_between_center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex_row_between_end {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.flex_row_around_start {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}

.flex_row_around_center {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.flex_row_around_end {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
}

/* 主轴为row -- end */
/* 主轴为column -- start */
.flex_column_start_start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex_column_start_center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.flex_column_start_end {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.flex_column_center_start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.flex_column_center_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex_column_center_end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.flex_column_end_start {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.flex_column_end_center {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.flex_column_end_end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.flex_column_between_start {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.flex_column_between_center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.flex_column_between_end {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.flex_column_around_start {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}

.flex_column_around_center {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.flex_column_around_end {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}

/* 主轴为row -- end */
/* 折行、不折行 -- start */
.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex_nowrap {
  display: flex;
  flex-wrap: nowrap;
}

/* 折行、不折行 -- end */
.flex1 {
  flex: 1;
}

.flex_row_reverse{
  flex-direction: row-reverse;
}

.flex_column_reverse{
  flex-direction: column-reverse;
}